<template>
	<view>
		<!-- swiper轮播图圆角滑动会变成直角然后再变回圆角 -->
		<!-- https://blog.csdn.net/weixin_45956230/article/details/113844402 -->
		<!-- 轮播图 -->
		<view :class="swiperClassName" class="Swiper-box" :style="[{'border-radius':SwiperRadius}]">
			<swiper class="swiper"  
			:style="[{'background-color':SwiperBackgroundColor},{'height':SwiperHeight+'rpx'},{'width':Number(750)-Number(SwiperWidthJian)+'rpx'},{'border-radius':SwiperRadius}]" 
			:indicator-dots="false" 
			:autoplay="autoplay" 
			:circular="true"
			:interval="3000" 
			:duration="1000"
			indicator-active-color="#333"
			@change="change"
			>
				<swiper-item 
				v-for="(item,index) in SwiperImglist"
				:key="index"
				:current="index"
				@click="openUrl(item)"
				>   
					<image :style="[{'width':Number(750)-Number(SwiperWidthJian)+'rpx'},{'height':SwiperHeight+'rpx'}]"
					class="Imges" :src="item.image||item.bannerfile.url" 
					></image>
					<!-- 背景阴影-用于文字底部 -->
					<image v-if="ImagesTextbg==true" :style="[{'width':Number(750)-Number(SwiperWidthJian)+'rpx'}]" class="ImagesTextbg" src="/static/FatFatMeng-apps/FatFatMeng-image/FatFatMeng-style/FatFatMeng-SwiperTextbg2.png" mode="widthFix"></image>
					<!-- 标题 -->
					<view class="title" :style="[{'width':Number(750)-Number(SwiperWidthJian)+'rpx'}]">
						<text class="text" :style="[{'width':Number(720)-Number(SwiperWidthJian)+'rpx'}]">{{item.title}}</text>
					</view>
				</swiper-item>
			</swiper>
			<!-- 自定义指示器 第一种 [官方的不好看，也不能自定义设置] -->
			<view v-if="indicator==1" class="indicator-dots-zdy-right" :style="[{width:Number(750)-Number(SwiperWidthJian)+'rpx',top:Number(SwiperHeight)-Number(50)+'rpx'}]">   
				<view class="w720" :style="[{'width':Number(720)-Number(SwiperWidthJian)+'rpx'}]">
					<view v-for="(item,index) in SwiperImglist" :key="index"
					class="indicator-dots-item"
					:class="current==index ? 'dots-item-current': 'no'"
					>
						<view class="radio" :class="current==index ? 'current': 'no'"></view>
					</view>
				</view>
			</view>
			<!-- 自定义指示器 第二种 [官方的不好看，也不能自定义设置] -->
			<view v-if="indicator==2" class="indicator-dots-zdy-right indicatorTwo" :style="[{width:Number(750)-Number(SwiperWidthJian)+'rpx',top:Number(SwiperHeight)-Number(100)+'rpx'}]">
				<view class="w720" :style="[{'width':Number(720)-Number(SwiperWidthJian)+'rpx'}]">
					<view class="indicator-dots-item itemTwo">
						<text class="itemTwo-text">{{current+Number(1)}}/{{SwiperImglist.length}}</text>
					</view>
				</view>
			</view>
		</view>
		
		
		<!--  -->
	</view>
</template>

<script>
	export default {
		name:"FatFatMeng-Swiper",
		props:{
			// 数据列表
			SwiperImglist:{
				type:Array,
				default:''
			},
			// 是否自动轮播
			autoplay:{
				type:Boolean,
				default:true
			},
			// 指示器样式 可选1、2
			indicator:{
				type:Number,
				default:1//默认第一种样式
			},
			// Swiper盒子自定义样式//暂时弃用
			// swiperStyleClass: {
			// 	type:Array,
			// 	default:''
			// },
			// swpier盒子最外层的view的class样式
			swiperClassName: {
				type:String,
				default:''
			},
			// 需要减去的宽度，如外面盒子是690rpx,
			// 那么swiper需要建60rpx才能和外面是居中的整体的，
			// 不然会超出
			SwiperWidthJian:{
				type:Number,
				default:0 //默认0rpx
			},
			// swiper的高度
			SwiperHeight:{
				type:Number,
				default:420
			},
			// swiper的背景色 -- 实际用不到
			SwiperBackgroundColor:{
				type:String,
				default:'rgba(0, 0, 0, .0)'
			},
			SwiperRadius:{
				type:String,
				default:'0rpx'
			},
			// 是否开启文字阴影背景
			ImagesTextbg:{
				type:Boolean,
				default:true
			}
		},
		data() {
			return {
				// 这个是为了让自定义的指示器再对应的坐标高亮
				// 官方的指示器不能自定义，而且很丑！
				current:0//当前指示器所在的坐标
			};
		},
		methods:{
			// current 改变时会触发 change 事件，event.detail = {current: current, source: source}
			change(e) {
				//console.log(e.detail.current)
				this.current = e.detail.current
			},
			// 打开页面
			openUrl(item) {
				//console.log(item)
				this.$emit('change',item)
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import './Swiper.scss';
</style>
